<script lang="ts" setup>
import { ListenerProp } from '@varlet/ui';
import { ref, watchEffect } from 'vue';
import { i18nTranslate } from '/@/i18n';

import { onlyNumberAllowed } from '/@/utils';

// 定义 props
const props = defineProps<{
    modelValue?: string;
    label?: string;
    disabled?: boolean;
    readonly?: boolean;
    autofocus?: boolean;
    loading?: boolean;
    /**
     * 倒计时的时间，传入大于0即开始倒计时
     */
    time?: string | number;
    'onUpdate:modelValue'?: ListenerProp<(value: string) => void>;
    onSend?: ListenerProp<() => void>;
    /**
     * 倒计时结束
     */
    onEnd?: ListenerProp<() => void>;
    paste?: boolean; //粘贴
    btnText?: string;
}>();
const showResend = ref(false);
const inputRef = ref();
watchEffect(() => {
    if (!showResend.value && props.time) {
        showResend.value = true;
    }
});

// 定义事件
const emit = defineEmits(['update:modelValue', 'send', 'end']);

// v-model
const onClear = (value: string) => {
    emit('update:modelValue', value);
};
const onInput = (value: string) => {
    const _value = onlyNumberAllowed(value);
    // 直接操作 input 来修改
    inputRef.value.el.value = _value;
    emit('update:modelValue', _value);
};
const onSendCode = () => {
    emit('send');
};
const onTimeEnd = () => {
    emit('end');
};

// 校验规则，返回true表示通过校验
const rules = [
    (v: string) => {
        // 校验验证码是否是6位数字
        if (!v || v.length !== 6) {
            return i18nTranslate('');
        }
        return true;
    },
];
</script>
<template>
    <div class="hl-input-box">
        <div class="label" v-if="label">{{ label }}</div>
        <VarInput ref="inputRef" class="input" type="tel" :placeholder="$t('PleaseenteryourVerificationCode')"   :hint="false" :line="false"
            :model-value="modelValue" :readonly="readonly" :rules="rules" :autofocus="autofocus" @clear="onClear"
            @input="onInput">
            <!-- <template #prepend-icon>
                <div class="icon_box">
                    <img :src="$img('common/verification_icon.png')" />
                </div>
            </template> -->
            <template #append-icon>
                <div v-if="time && Number(time) > 0" class="countdown-box">
                    <VarCountdown :time="time" format="ss" @end="onTimeEnd"></VarCountdown>
                    <span>s</span>
                </div>
                <!-- <VarButton v-else-if="paste" class="code-button" type="primary" elevation="0" size="small"
                    @click="onPasteCode">
                    paste
                </VarButton> -->
                <div v-else  class="code-button" 
                    :loading="loading" @click="onSendCode">
                    {{$t('Send')}}
                    <!-- {{ showResend ? $t('form_veri_code_resend') : btnText || $t('form_veri_code_send') }} -->
                </div>
            </template>
        </VarInput>
    </div>
</template>
<style scoped lang="scss">
.hl-input-box {
    .input {
        .countdown-box {
            width: 60px;
            color: $text-sub;
            font-size: 26px;
            display: flex;
            justify-content: flex-end;
        }
    }

    .icon_box {
        width: 36px;
        height: 36px;
        margin-right: 40px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .code-button {
        color: #0063f5;
        font-size: 32px;
    }
}
</style>
<style lang="scss">
@import './input.scss';
</style>
